<template>
	<view class="layer">
		
		<IndexHead :config="navConfig"/>	
			
		
		<!-- 图标区域2 -->
		<view class="icon2">
			<text class="bibei">出行服务</text>
			<view class="list">
			    <view class="item" v-for="(item,index) in iconData2" :key='index'>
			        <navigator :url="item.url">
			            <image :src="item.img" mode=""></image>
			            <text>{{item.name}}</text>
			        </navigator>
			    </view>
			  
			</view>
		</view>
		
		<view class="icon2">
			<text class="bibei">出行服务</text>
			<view class="list">
			    <view class="item" v-for="(item,index) in iconData4" :key='index'>
			        <navigator :url="item.url">
			            <image :src="item.img" mode=""></image>
			            <text>{{item.name}}</text>
			        </navigator>
			    </view>
			  
			</view>
		</view>
		
		<!-- 图标区域3 -->
		<view class="icon2 icon3">
			<text class="bibei">出行服务</text>
				<view class="list">
					<view class="item" v-for="(item,index) in iconData3" :key='index'>
						<navigator :url="item.url">
							<image :src="item.img" mode=""></image>
							<text>{{item.name}}</text>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		</view>	
	</view>
</template>

<script>
	import FootMenu from'@/components/footMenu.vue'
	export default{
		data(){
			return{
				navConfig:{
					backgroundColor: 'transparent',
					color: '#fff',
					common:{
						hasSearch:false,
						hasMenu:false,
						hasTitle:true,
						minHead:true,
						showHeadBg:false
					},
					left: {
						img:'',
						text:'',
					},
					mid:{
						title:'更多',
						hasSearchMid:false
					},
					right:{
						
					}
				},
				curTabIndex: 0,
				
				iconData2:[
					{
					 name:'实名认证',
					 url:'../myRealName/realName',
					 img:'/static/myPic/shiMingRenZheng.png'
					},
					{
					 name:'银行卡',
					 url:'../myBankCard/bankCard',
					 img:'/static/myPic/yinHangKa.png'
					},
					{
					 name:'我的收藏',
					 url:'../myCollection/collection',
					 img:'/static/myPic/shouCang.png'
					},
					{
					 name:'我的地址',
					 url:'../myAddress/address1',
					 img:'/static/myPic/diZhi.png'
					},
				],
				iconData4:[
					{
					 name:'实名认证',
					 url:'../myRealName/realName',
					 img:'/static/myPic/shiMingRenZheng.png'
					},
					{
					 name:'银行卡',
					 url:'../myBankCard/bankCard',
					 img:'/static/myPic/yinHangKa.png'
					},
					{
					 name:'我的收藏',
					 url:'../myCollection/collection',
					 img:'/static/myPic/shouCang.png'
					},
				],
				iconData3:[
					{
					 name:'排队码',
					 url:'../myLineUp/lineUp',
					 img:'/static/myPic/paiduima.png'
					},	
					{
					 name:'我的账单',
					 url:'',
					 img:'/static/myPic/zhangDan.png'
					},
					{
					 name:'我的成就',
					 url:'../myChengjiu/chengJiu',
					 img:'/static/myPic/chengJiu.png'
					},
					{
					 name:'我的足迹',
					 url:'../myFoot/foot',
					 img:'/static/myPic/zuJi.png'
					},
					{
					 name:'购票信息',
					 url:'/pages/my/myTicket/ticketMessage',
					 img:'/static/myPic/gouPiaoXinXi.png'
					},
					{
					 name:'合作加盟',
					 url:'../join/join',
					 img:'/static/myPic/jiaMeng.png'
					},
					{
					 name:'设置',
					 url:'../mySet/set',
					 img:'/static/myPic/sheZhi.png'
					},
					{
					 name:'SOS',
					 url:'',
					 img:'/static/myPic/sos.png'
					},
					{
					 name:'上报POI点',
					 url:'/pages/my/myPOI/myPOI',
					 img:'/static/myPic/POI.png'
					},
				]
			}
		},components: {
		FootMenu
		}
	}
	
	
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 1334upx;
		background-color: #F6F6F6;
	}
	
	/* 图标区域2 */
	.icon2{
		margin-left: 29upx;
		
		width: 691upx;
		background: #fff;
		box-shadow: -0.419px 5.985px 9px 0px rgba(221,222,224,0.48);
		margin-top: 30upx;
	}
	.icon2 .list{
		display: flex;
		flex-direction:row;
		justify-content: flex-start;
		align-items: center;
		width:100%;
		flex-wrap: wrap;
	}
	.list .item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width:25%;
		max-width: 25%;
		min-width: 25%;
		margin-bottom:30upx;
	}
	.list .item navigator{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.icon2 .bibei{
		float: left;
		width: 100%;
		height: 50upx;
		font-size: 28upx;
		font-family: Microsoft YaHei Regular;
		color: #333333;
		margin-left: 19upx;
		margin-top: 27upx;
	}
	.icon2 .item image{
		max-width:100upx ;
		max-height: 100upx;
	}
	.icon2 .item:nth-child(3) image,.icon2 .item:nth-child(4) image{
		width:50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}
	.icon2 .item:nth-child(1),.icon2 .item:nth-child(2) {
		margin-top: -22upx;
	}
	.icon3 .bibei{
		padding:0 0 22upx 0
	}
	.icon3 .item:nth-child(3) image{
		width: 50upx;
		height: 50upx;
		margin-top: -22upx;
	}
	.icon3 .item:nth-child(1) image,.icon3 .item:nth-child(2) image,.icon3 .item:nth-child(5) image{
		width:50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}
	.icon3 .item:nth-child(4) ,.icon3 .item:nth-child(6),.icon3 .item:nth-child(7) {
		margin-top: -22upx;
	}
	.icon3 .item:nth-child(8) image{
		width:50upx;
		height: 50upx;
		margin-bottom: 22upx;
	}
	.icon3 .item:nth-child(9) image{
		width: 60upx;
		height: 60upx;
		margin-bottom: 22upx;
	}
	.icon3 .item:nth-child(9) text{
		width: 120upx;
	}
	.icon2 .item text{
		width: 102upx;
		height: 24upx;
		text-align: center;
		display: block;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
	}
	.icon2 .item2{
		float: left;
		height: 132upx;
		width: 102upx;
	}
	.icon2 .item2 i{
		width: 72upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 71upx;
	}
	.icon2 .item3{
		float: left;
		margin-left: 30upx;
	}
	.icon2 .item3 i{
		width: 100upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left:54upx;
	}
	.icon2 .item4{
		float: left;
		margin-left: 30upx;
	}
	.icon2 .item4 i{
		width: 100upx;
		height: 24upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 56upx;
	}
</style>
